<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total,->,sizes, prev, pager, next,jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    pageSize: {
      type: Number,
      default: 1,
    },
    total: {
      type: Number,
      default: 0,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("changePageSize", val)
    },
    handleCurrentChange(val) {
      this.$emit("changePage",val)
    },
  },
  data() {
    return {
      currentPage1: this.currentPage,
    };
  },
  watch:{
    currentPage(val){
      this.currentPage1 = val;
    }
  },
  mounted() {
    const pagination__total = document.querySelector(".el-pagination__total");
    pagination__total.innerText = `共 ${this.total} 项数据`;
  },
};
</script>
<style lang="less">
.el-pagination__total {
  color: #a8a4a4;
}
.el-pagination .el-select .el-input .el-input__inner {
  background: #494141;
  border: 1px solid #737070;
  color: #a8a4a4;
}
.el-popper {
  background: #494141;
  border: 1px solid #737070;
  color: #a8a4a4;
}
.popper__arrow::after {
  border-top-color: #494141 !important;
}
.el-select-dropdown__item {
  color: #a8a4a4;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #5f5c5c;
}

.el-pagination button {
  background: #494141 !important;
}
.el-pager li {
  background: #494141;
  color: #fff;
}
.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
  color: #fff;
}
.el-pagination__jump {
  color: #a8a4a4;
}
.el-pagination .el-input__inner {
  background: #494141;
  color: #fff;
}
</style>
